<template>
	<view>
		<view class="content">
		  <img src="@/static/images/home/home_bottom.png" class="top_img" />
		  <view class="menus">
				<view @click="showPicker = !showPicker" class="current-assess">
					<view class="assess-name">{{ pickerList.length > 0 ? pickerList[currentPickerIndex].name : '--' }}</view>
					<u-icon class="icon" :name="showPicker ? 'arrow-down' : 'arrow-right'" color="#2979ff" size="28"></u-icon>
				</view>
		    <view class="menu-list">
		      <view class="menu-1">
		        <view class="menu-name">累计申报组织数</view>
		        <view class="menu-count">{{ statData.declarationInfoCount || 0 }}家</view>
		      </view>
					<view class="menu-1">
					  <view class="menu-name">通过评估数</view>
					  <view class="menu-count">{{ statData.passCount || 0 }}家</view>
					</view>
		    </view>
		  </view>
		</view>
		
		<!-- 统计级别 -->
		<view class="level">
			<view class="level-title">统计级别</view>
			<view class="level-items">
				<view v-for="(item, index) in levelList" class="level-item">
					<view class="lt-left">{{ item.name || '1A' }}</view>
					<view class="lt-right">
						<view class="lt-count">
							<view>{{ item.value.count || 0 }}</view>
							<view class="lt-title">申报总数</view>
						</view>
						<view class="lt-count">
							<view>{{ item.value.pass || 0 }}</view>
							<view class="lt-title">通过总数</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 总分排行 -->
		<view class="level">
			<view class="level-title">总分排行</view>
			<view class="level-items">
				<view class="options">
					<view v-for="(item, index) in levelList" @click="chooseLevel(index)" class="option" :class="{act : chooseLevelIndex == index }">
					{{ item.name || '1A' }}
					</view>
				</view>
				<view v-for="(item, index) in levelRankList" :key="index" class="rank-item">
					<view class="ranking">{{ index + 1 }}</view>
					<view class="rank-top">{{ item.userName || '--' }}</view>
					<view class="rank-bottom">
						<view>{{ item.type || '--' }}</view>
						<view>总分: <span style="color: orange;padding-left: 5rpx;"> {{ parseInt(item.score) || '--' }} </span></view>
					</view>
				</view>
				<view v-if="levelRankList.length == 0" class="no-data">暂无数据~</view>
			</view>
		</view>
		
		<view style="width: 100%; height: 30rpx; background: none"></view>
		<!-- 选择体系 -->
		<u-picker mode="selector" v-model="showPicker" @confirm="pickerConfirm"  :default-selector="[0]" :range="pickerList" range-key="name"></u-picker>
	</view>
</template>

<script>
// AES加密
import { aesEncrypt } from "@/utils/aes";
// 通用验证方法
import { checkPhone } from "@/utils/common";
// 单个页面所需接口
import { getInfo } from "@/api/user";
import {	queryAssessPage, queryAssessStatData, queryRankingData } from "@/api/home";
export default {
  data() {
    return {
			currentPickerIndex: 0,
			chooseLevelIndex: 0,
			statData: {},
      userInfo: {},
      currentDeclarationObj: {},
			levelList: [],
			levelRankList: [],
			showPicker: false,
			pickerList: []
    };
  },
	watch: {
		currentPickerIndex() {
			this.laodAssessStatData()
		},
		chooseLevelIndex() {
			this.loadRankingData()
		}
	},
  methods: {
		initData() {
			// this.getUserInfo();
			this.loadAssessList()
		},
		// 选择等级
		chooseLevel(index) {
			this.chooseLevelIndex = index
		},
		// 确认选择
		pickerConfirm(data) {
			this.currentPickerIndex = data[0]
		},
    getUserInfo() {
      getInfo({ isLastReq: false }).then((res) => {
        if (res.code == 200) {
          // console.log(res);
          uni.setStorageSync("userInfo", res.data.user);
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
		// 获取体系列表
    loadAssessList() {
			let params = {
				current: 1,
				size: 1000,
				isLastReq: false
			}
      queryAssessPage(params).then((res) => {
        if (res.code == 200) {
          this.pickerList = res.data.records || []
					if (this.pickerList.length > 0) {
						this.laodAssessStatData()
					} else {
						uni.hideLoading()
					}
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
		// 获取统计数据
		laodAssessStatData() {
			let params = {
				declarationSystemId: this.pickerList[this.currentPickerIndex].id,
				isLastReq: false
			}
			queryAssessStatData(params).then((res) => {
			  if (res.code == 200) {
			    this.statData = res.data || {}
					this.levelList = res.data?.levels || []
					this.loadRankingData()
			  } else {
					this.statData = {}
					this.levelRankList = []
			    uni.showToast({
			      title: res.msg,
			      icon: "none",
			    });
			  }
			});
		},
		// 获取等级排行数据
		loadRankingData() {
			let params = {
				declarationSystemId: this.pickerList[this.currentPickerIndex].id,
				levelId: this.levelList[this.chooseLevelIndex].id
			}
			queryRankingData(params).then((res) => {
			  if (res.code == 200) {
			    this.levelRankList = res.data || []
			  } else {
			    uni.showToast({
			      title: res.msg,
			      icon: "none",
			    });
			  }
			});
		}
  },
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
  height: 505rpx;
  background: #ffffff;
	margin-bottom: 30rpx;
  .top_img {
    width: 750rpx;
    height: 428rpx;
  }

  .menus {
    position: absolute;
    top: 185rpx;
    left: 35rpx;
    width: 680rpx;
		background: #fff;
		padding: 30rpx;
		box-shadow: 0px 3rpx 6rpx 0px rgba(124, 144, 222, 0.25);
		border-radius: 10rpx 10rpx 30rpx 30rpx;
		.current-assess {
			padding: 12rpx;
			border: 1px solid #efefef;
			border-radius: 5rpx;
			margin-bottom: 30rpx;
			display: flex;
			.assess-name {
				flex: 1;
			}
			.icon {
				// width: 30rpx;
				text-align: right;
			}
		}
    .menu-list {
      font-size: 24rpx;
      text-align: center;
      display: flex;
      align-items: center;
      .menu-1 {
				flex: 1;
        .menu-name {
          font-size: 28rpx;
          color: gray;
          line-height: 54rpx;
        }
				.menu-count {
					font-size: 50rpx;
				}
      }
			.menu-1:first-child {
				border-right: 1px solid #e2dfdf;
			}
    }
  }
}

.level {
	background-color: #fff;
	margin-bottom: 30rpx;
	.level-title {
		padding: 25rpx 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 1px solid #efefef;
	}
	.level-items {
		padding: 25rpx 30rpx 30rpx;
	}
	.level-item {
		height: 120rpx;
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		border: 1px solid #efefef;
		border-radius: 10rpx;
		.lt-left {
			color: #0084fe;
			font-size: 36rpx;
			width: 150rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1px solid #efefef;
			background-color: #edf3ff;
		}
		.lt-right {
			flex: 1;
			display: flex;
		}
		.lt-count {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}
		.lt-count:first-child {
			border-right: 1px solid #efefef;
		}
		.lt-title {
			font-weight: normal;
			color: #999;
			font-size: 26rpx;
			margin-top: 5rpx;
		}
	}
	.rank-item {
		padding: 20rpx 20rpx 20rpx 50rpx;
		border: 1px solid #efefef;
		border-radius: 8rpx;
		margin-bottom: 25rpx;
		position: relative;
		.ranking {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 26rpx;
			width: 45rpx;
			text-align: center;
			color: #0084fe;
			background-color: #edf3ff;
			border-radius: 0 0 20rpx 0;
		}
		.rank-top {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 8rpx;
		}
		.rank-bottom {
			opacity: .8;
			display: flex;
			justify-content: space-between;
		}
	}
	.level-item:last-child, .rank-item:last-child {
		margin-bottom: 0;
	}
	.options {
		padding-bottom: 25rpx;
		display: flex;
		justify-content: space-between;
		.option {
			width: 18%;
			padding: 8rpx 0;
			background-color: #f5f6f8;
			text-align: center;
			border-radius: 8rpx;
		}
		.option.act {
			color: #0084fe;
			background-color: #edf3ff;
		}
	}
	.no-data {
		padding: 20rpx 20rpx 10rpx;
		text-align: center;
		color: gray;
	}
}
</style>
